<template>
  <div class="clearfix">
    <a-upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      listType="picture-card"
      :fileList="fileList"
      @preview="handlePreview"
      @change="handleChange"

    >
      <div v-if="fileList.length < 3">
        <a-icon type="plus"/>
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage"/>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: "UploadDemo2",
    data() {
      return {
        previewVisible: false,
        previewImage: '',
        fileList: [],
      }
    },
    mounted(){
      this.fetch();
    },
    methods: {
      handleCancel() {
        this.previewVisible = false
      },
      handlePreview(file) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },

      handleChange(info) {
        this.fileList=info.fileList;
        var file= info.file;
        if(file.status==="removed"){
          this.$delete('file/',{fileKey:file.name}).then((r)=>{
            console.info("r.data",r,data)
          });
        }
        console.info("file",info.file)
      },

     /* handleChange({fileList}) {
        this.fileList = fileList
      },*/
      fetch() {
        this.$get('file', {}).then((r) => {
          var files = r.data.data;
          files.map((item) => {
            this.fileList.push(item);
          })
        })
      },
      handleRemove(file){
        alert(file.name);
      }
    },
  }


</script>

<style scoped>

</style>
